import QtQuick
import QtQuick.Layouts
import QtQuick.Controls

import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common

ColumnLayout {
  id: root
  anchors.fill: parent
  property var extra_data: ({ name: "", data: [] })
  signal finish()

  BigGlowText {
    Layout.fillWidth: true
    Layout.preferredHeight: childrenRect.height + 4

    text: Lua.tr(extra_data.name)
  }
  
  // 使用滚动视图容纳所有分组
  ScrollView {
    Layout.fillWidth: true
    Layout.fillHeight: true
    
    ColumnLayout {
      width: parent.width
      spacing: 15
      
      // 遍历所有分组
      Repeater {
        model: extra_data.data
        
        // 每个分组的布局
        RowLayout {
          Layout.fillWidth: true
          spacing: 10
          
          // 分组名显示
          Rectangle {
            border.color: "#A6967A"
            radius: 5
            color: "transparent"
            width: 18
            height: 130
            Layout.alignment: Qt.AlignTop

            Text {
              color: "#E4D5A0"
              text: Lua.tr(modelData[0]) // 分组名是每个数组的第一个元素
              anchors.fill: parent
              wrapMode: Text.WrapAnywhere
              verticalAlignment: Text.AlignVCenter
              horizontalAlignment: Text.AlignHCenter
              font.pixelSize: 15
            }
          }
          
          // 该分组的技能按钮网格
          Grid {
            Layout.fillWidth: true
            rows: Math.ceil((modelData.length - 1) / 10) // 减去分组名
            columns: 10
            rowSpacing: 5
            columnSpacing: 5
            
            // 遍历该分组的所有技能（从第二个元素开始）
            Repeater {
              model: {
                var skills = [];
                // 从第二个元素开始收集技能数据
                for (var i = 1; i < modelData.length; i++) {
                  skills.push(modelData[i]);
                }
                return skills;
              }
              
              Item {
                width: 88
                height: 36

                property var skillName: modelData[0] // 技能名
                property var prohibit: modelData[1] // 是否变灰

                SkillButton {
                  anchors.fill: parent
                  skill: Lua.tr(skillName)
                  type: "active"
                  orig: skillName
                  enabled: !prohibit
                }
              }
            }
          }
        }
      }
    }
  }

  onExtra_dataChanged: {
    // 如果传入的是字符串，转换为数组格式
    if (typeof(extra_data.data) == "string") {
      extra_data.data = [[extra_data.data]];
    }
    // 如果传入的是二维数组（旧格式），转换为新的分组格式
    else if (Array.isArray(extra_data.data) && extra_data.data.length > 0 && 
             Array.isArray(extra_data.data[0]) && extra_data.data[0].length === 2 && 
             typeof extra_data.data[0][0] === "string" && typeof extra_data.data[0][1] === "boolean") {
      // 这是一个二维数组 [["技能名", prohibit], ...]
      // 转换为分组格式：[["默认分组", ["技能名", prohibit], ...]]
      var newData = [["默认分组"]];
      for (var i = 0; i < extra_data.data.length; i++) {
        newData.push(extra_data.data[i]);
      }
      extra_data.data = [newData];
    }
  }
}